<template>
  <div>
    <Tabs v-model:activeKey="key" :animated="true">
      <TabPane key="first">
        <template #tab>{{ firstTitle }} </template>
        <BasicTable @register="registerFirstTable" :dataSource="firstTableData" />
      </TabPane>
      <TabPane key="second">
        <template #tab> {{ secondTitle }} </template>
        <BasicTable @register="registerSecondTable" :dataSource="secondTableData" />
      </TabPane>
    </Tabs>
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable } from '/@/components/Table';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { tableSchema } from './exceptions.data';
  import { watch, ref } from 'vue';
  import { tableStyleSetting } from '/@/settings/thingsBoardDesign';
  const props = defineProps({
    data: { type: Object, default: () => {} },
  });
  const firstTitle = ref('');
  const secondTitle = ref('');
  const key = ref('first');
  const firstTableData = ref<Array<any>>([]);
  const secondTableData = ref<Array<any>>([]);

  const [registerFirstTable] = useTable({
    columns: tableSchema,
    ...tableStyleSetting,
    showTableSetting: false,
    actionColumn: {},
    useSearchForm: false,
  });
  const [registerSecondTable] = useTable({
    columns: tableSchema,
    ...tableStyleSetting,
    showTableSetting: false,
    actionColumn: {},
    useSearchForm: false,
  });

  watch(
    () => props.data,
    (nVal) => {
      nVal.splice(0, nVal.length - 2);
      firstTitle.value = nVal[0].name;
      secondTitle.value = nVal[1].name;
      firstTableData.value = [];
      secondTableData.value = [];
      nVal[0].value.ruleEngineException.forEach((item) => {
        firstTableData.value.push({
          createdTime: item.ts,
          ruleChainName: JSON.parse(item.value).ruleChainName,
          ruleNodeName: JSON.parse(item.value).ruleNodeName,
          message: JSON.parse(item.value).message,
        });
      });
      nVal[1].value.ruleEngineException.forEach((item) => {
        secondTableData.value.push({
          createdTime: item.ts,
          ruleChainName: JSON.parse(item.value).ruleChainName,
          ruleNodeName: JSON.parse(item.value).ruleNodeName,
          message: JSON.parse(item.value).message,
        });
      });
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>
